<template>
  <div>
    <div class="cs-filter-container" style="margin-top: 20px">
      <el-input
        v-model="listQuery.targetId"
        clearable
        placeholder="用户ID"
        style="width: 90px"
      />
      <el-select
        v-model="listQuery.chatType"
        clearable
        placeholder="类型"
        style="width: 90px"
      >
        <el-option label="视频" :value="0"></el-option>
        <el-option label="语音" :value="1"></el-option>
      </el-select>
      <el-select
        v-model="listQuery.stars"
        clearable
        placeholder="用户打分"
        style="width: 90px"
      >
        <el-option label="1" :value="1"></el-option>
        <el-option label="2" :value="2"></el-option>
        <el-option label="3" :value="3"></el-option>
        <el-option label="4" :value="4"></el-option>
        <el-option label="5" :value="5"></el-option>
      </el-select>
      <el-select
        v-model="listQuery.userType"
        clearable
        placeholder="用户类型"
        style="width: 120px"
      >
        <el-option label="vip男" :value="1"></el-option>
        <el-option label="普通男" :value="2"></el-option>
        <el-option label="vip女神" :value="3"></el-option>
        <el-option label="女神" :value="4"></el-option>
        <el-option label="vip女真人" :value="5"></el-option>
        <el-option label="女真人" :value="6"></el-option>
      </el-select>
      <el-input
        v-model="listQuery.minRate"
        clearable
        placeholder="最小鉴黄分数"
        type="number"
      ></el-input>
      -
      <el-input
        v-model="listQuery.maxRate"
        clearable
        placeholder="最大鉴黄分数"
        type="number"
      ></el-input>
      <el-select
        v-model="listQuery.from"
        clearable
        placeholder="发起人"
        style="width: 120px"
      >
        <el-option label="自己发起" :value="1"></el-option>
        <el-option label="对方发起" :value="2"></el-option>
      </el-select>
      <el-select
        v-model="listQuery.scene"
        multiple
        filterable
        clearable
        placeholder="场景"
        style="width: 300px"
      >
        <el-option
          v-for="(item, i) in context_items"
          :key="i"
          :label="item"
          :value="i"
        />
      </el-select>
      <el-input
        v-model="listQuery.fromMinWaitTime"
        clearable
        placeholder="发起时间(min)"
        type="number"
        style="width:200px"
      ></el-input>
      <el-input
        v-model="listQuery.fromMaxWaitTime"
        clearable
        placeholder="发起时间(max)"
        type="number"
        style="width:120px"
      ></el-input>
      <el-input
        v-model="listQuery.toMinWaitTime"
        clearable
        placeholder="接受时间(min)"
        type="number"
        style="width:150px"
      ></el-input>
      <el-input
        v-model="listQuery.toMaxWaitTime"
        clearable
        placeholder="接受时间(max)"
        type="number"
        style="width:150px"
      ></el-input>
      <el-input
        v-model="listQuery.minDuration"
        clearable
        placeholder="最短时长(秒)"
        type="number"
        style="width:150px"
      ></el-input>
      <el-input
        v-model="listQuery.maxDuration"
        clearable
        placeholder="最大时长(秒)"
        type="number"
        style="width:150px"
      ></el-input>
      <el-select
        v-model="listQuery.orderBy"
        clearable
        placeholder="排序列"
        style="width: 120px"
      >
        <el-option label="创建时间" value="create_time" />
        <el-option label="更新时间" value="update_time" />
        <el-option label="发起者id" value="from_user" />
        <el-option label="接收者id" value="to_user" />
      </el-select>
      <el-select
        v-model="listQuery.orderType"
        clearable
        placeholder="排序方式"
        style="width: 120px"
      >
        <el-option label="倒序" value="DESC" />
        <el-option label="正序" value="ASC" />
      </el-select>
      <el-select
        v-model="listQuery.checkStatus"
        clearable
        placeholder="已阅/未阅"
        style="width: 120px"
      >
        <el-option label="未阅" value="0" />
        <el-option label="已阅" value="1" />
      </el-select>
      <el-select
        v-model="listQuery.certificationStatus"
        clearable
        placeholder="认证类型"
      >
        <el-option label="未认证" :value="0" />
        <el-option label="真人认证" :value="1" />
        <el-option label="女神认证" :value="2" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="listGiftChat"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
      <!-- <el-link type="primary" @click="advanceSearchVisible = true"
        >高级搜索</el-link
      > -->
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="giftChatList.list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :height="'calc(100vh - 360px)'"
      >
        <el-table-column align="center" label="频道ID" width="70">
          <template slot-scope="{ row }">
            <a
              v-if="row.channelId"
              target="_blank"
              :href="row.channelId | filterHref('/anchor/video-thumb-all?id=')"
            >
              查看全部
            </a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起者ID">
          <template slot-scope="{ row }">
            <a
              target="_blank"
              :href="row.fromUser | filterHref('/account/account-list?id=')"
            >
              <TooptipsCom :user-id="row.fromUser" />
            </a>
            <el-button
              type="danger"
              size="mini"
              @click="onForbid(row.fromUser)"
            >
              封号
            </el-button>
            <span>{{ userAddress[row.fromUser] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起者截图" min-width="140">
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.fromUrl">
              <img
                slot="img"
                :src="row.fromUrl + '?x-oss-process=image/resize,w_175'"
                style="cursor: pointer; width: 100px"
                title="点击放大"
                @click="zoomImage(row.fromUrl)"
              />
            </image-tooltip>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          label="发起者等待时间(秒)"-->
        <!--          prop="fromWaitTime"-->
        <!--        >-->
        <!--        </el-table-column>-->
        <el-table-column align="center" label="用户打分" prop="stars">
        </el-table-column>
        <el-table-column align="center" label="接收者ID">
          <template slot-scope="{ row }">
            <a
              target="_blank"
              :href="row.toUser | filterHref('/account/account-list?id=')"
            >
              <TooptipsCom :user-id="row.toUser" />
            </a>
            <el-button
              type="danger"
              size="mini"
              @click="onForbid(row.toUser)"
            >
              封号
            </el-button>
            <span>{{ userAddress[row.toUser] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="接收者截图" min-width="140">
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.toUrl">
              <img
                slot="img"
                :src="row.toUrl + '?x-oss-process=image/resize,w_175'"
                style="cursor: pointer; width: 100px"
                title="点击放大"
                @click="zoomImage(row.toUrl)"
              />
            </image-tooltip>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          label="接收者等待时间(秒)"-->
        <!--          prop="toWaitTime"-->
        <!--        >-->
        <!--        </el-table-column>-->
        <el-table-column align="center" label="类型">
          <template slot-scope="{ row }"
            >{{ row.chatType === 0 ? '视频' : '语音' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="{ row }">
            <span v-if="row.state === 2 && !row.acceptTime">未接通</span>
            <span v-else>{{ row.state | state }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="认证类型" prop="createTime">
          <template slot-scope="{ row }">{{
            certificationItems[row.certificationStatus]
            }}</template>
        </el-table-column>
        <el-table-column align="center" label="场景">
          <template slot-scope="{ row }"
            >{{ context_items[row.context] }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="场景">
          <template slot-scope="{ row }"
            >{{ context_items[row.context] }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束者ID">
          <template slot-scope="{ row }">
            <a
              target="_blank"
              :href="row.endUser | filterHref('/account/account-list?id=')"
            >
              <TooptipsCom :user-id="row.endUser" />/{{
                row.endGender | gender
              }}
            </a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束方式">
          <template slot-scope="{ row }">{{ endDesc(row.endType) }} </template>
        </el-table-column>
        <el-table-column align="center" label="时长(分钟)">
          <template slot-scope="{ row }">
            {{ duration(row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="等待时长(秒)">
          <template slot-scope="{ row }">
            {{ awaitTime(row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼物数量">
          <template slot-scope="{ row }">
            直购: {{ row.giftPay || 0 }}<br />
            背包: {{ row.giftPackSack || 0 }}<br />
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼物详情">
          <template slot-scope="{ row }">
            {{ row.giftDetail }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="消耗">
          <template slot-scope="{ row }">
            {{ consume(row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="获得积分">
          <template slot-scope="{ row }">
            {{ row.pointGain / 100 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="付费匹配">
          <template slot-scope="{ row }">
            {{ row.freeMatch === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="系统积分" prop="sysCoins">
          <template slot-scope="{ row }">
            {{ row.sysCoins / 100 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="最大鉴黄分数">
          <template slot-scope="{ row }">
            {{ row.maxRate }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起时间">
          <template slot-scope="{ row }"
            >{{ row.startTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间">
          <template slot-scope="{ row }"
            >{{ row.endTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="80">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.checkStatus === 0 && row.chatType === 0"
              type="primary"
              size="mini"
              @click="onVerify([row])"
            >
              已阅
            </el-button>
            <el-button
              v-if="row.chatType === 0"
              type="danger"
              size="mini"
              @click="onDelImage(row)"
            >
              删除图片
            </el-button>
            <el-button v-if="row.chatType === 0" type="danger" @click="reviewAll(row)" size="mini">
              一键审阅女用户
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="giftChatList.total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <ImageViewer :visible.sync="showImage" :url="videoUrl" :type="'image'" />
    <DialogForbidAccount
      :visible.sync="dialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="'2'"
      :hours="72"
      :banned-type="['BANNED_ANCHOR_TAB', 'BANNED_RANDOM_CHAT_ASSIGNED']"
      :reason="
        'IMPORTANT \n' +
          '1：Say hi to who chat with you.even you don\'t speak english.（show them you are not record video)\n' +
          '2：Don\'t Cover camera,wear mask ,or complete Dark.Please show yourself in video call\n' +
          '3: sexy! still beautiful ,still sexy\n' +
          '4: goegerous is means hot sexy ladies. if not we will  downgrade to verified\n' +
          '5:don\'t do auto match video call\n' +
          'If you want to know more,and earn more please contact us. \n' +
          ' telegram is +63 9162478439. \n' +
          'facebook messenger is https://www.facebook.com/qiang.chen.549436 \n' +
          'email is bitrober@gmail.com .'
      "
      @onSuccess="doSearch"
    />
  </div>
</template>
<script>
import TablePagination from '@/components/TablePagination'
import { xhrListGiftChat } from '@/api/account'
import ImageViewer from '@/components/ImageViewer'
import DialogForbidAccount from '@/views/account/components/DialogForbidAccount'
import { xhrVideoThumbDelete, xhrVideoThumbVerify, xhrVideoUserVerify } from '@/api/anchor'
export default {
  components: { TablePagination, ImageViewer, DialogForbidAccount },
  filters: {
    state(val) {
      switch (val) {
        case 0:
          return '待接通'
        case 1:
          return '进行中'
        case 2:
          return '已结束'
        case 3:
          return '未接通'
        default:
          return '未知'
      }
    }
  },
  data() {
    const query = this.$route.query
    return {
      advanceSearchVisible: false,
      listQuery: {
        limit: 20,
        offset: 0,
        targetId: '',
        chatType: '',
        from: '',
        fromMinWaitTime: null,
        fromMaxWaitTime: null,
        toMaxWaitTime: null,
        toMinWaitTime: null,
        userType: null,
        orderBy: 'create_time',
        orderType: 'DESC',
        checkStatus: null,
        certificationStatus: null,
        scene: [],
        startTime: '',
        endTime: '',
        direction: '',
        maxRate: '',
        minRate: '',
        minDuration: '',
        maxDuration: ''
      },
      forbidAccounts: null,
      dialogVisible: false,
      showImage: false,
      videoUrl: '',
      userAddress: {},
      defaultQueryParams: {
        limit: 20,
        offset: 0,
        userId: (query && query.id) || null
      },
      certificationItems: {
        0: '未认证',
        1: '真人认证',
        2: '女神认证'
      },
      context_items: {
        1: '（花伴交友）IM内语音点播',
        2: '（花伴交友）IM内视频点播',
        3: '（花伴交友）缘分页面随机视频',
        4: '（花伴交友）缘分封面内语音点播',
        5: '（花伴交友）缘分封面内视频点播',
        6: '（花伴交友）详情页内语音点播',
        7: '（花伴交友）详情页内视频点播',
        8: '（花伴交友）随机语音匹配',
        9: '（花伴交友）随机视频匹配',
        10: '（花伴约会）IM内语音点播',
        11: '（花伴约会）IM内视频点播',
        12: '（花伴约会）随机语音匹配',
        13: '（花伴约会）随机视频匹配',
        14: '（花伴约会）封面内语音点播',
        15: '（花伴约会）封面内视频点播',
        16: '（花伴约会）详情页内语音点播',
        17: '（花伴约会）详情页内视频点',
        18: ' (花伴交友)音视频历史记录-语音点播',
        19: ' (花伴交友)音视频历史记录-视频点播',
        20: ' (花伴约会)音视频历史记录-语音点播',
        21: ' (花伴约会)音视频历史记录-视频点播'
      },
      daterangeValue: [],
      giftChat: null,
      listLoading: false,
      giftChatList: {}
    }
  },
  created() {
    // this.listGiftChat()
    console.log('created')
  },
  methods: {
    onAdvanceSearch() {
      this.doSearch()
      this.advanceSearchVisible = false
    },
    doSearch() {
      this.listLoading = true
      this.listGiftChat()
    },
    zoomImage(url) {
      this.showImage = true
      this.videoUrl = url
    },
    listGiftChat() {
      const params = Object.assign({}, this.listQuery)
      if (params.from) {
        if (params.from === 1) {
          params.fromUser = params.targetId
        } else {
          params.toUser = params.targetId
        }
      }
      if (params.maxRate) {
        params.maxRate = Math.min(params.maxRate, 100)
      }
      if (params.minRate) {
        params.minRate = Math.max(params.minRate, 0)
        if (params.maxRate) {
          params.minRate = Math.min(params.minRate, params.maxRate)
        }
      }
      params.scene =
        (this.listQuery.scene && this.listQuery.scene.join(',')) || null
      xhrListGiftChat(params)
        .then(resp => {
          this.giftChatList = resp.data
          if (resp.data.userAddress) {
            this.userAddress = resp.data.userAddress
          }
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    endDesc(endType) {
      let result = ''
      switch (endType) {
        case 0:
          result += '拒接'
          break
        case 1:
          result += '挂断'
          break
        case 2:
          result += '掉线'
          break
        case 3:
          result += '超时未接'
          break
        case 4:
          result += '系统中断'
          break
        default:
          result = '未知'
      }
      return result
    },
    awaitTime(row) {
      if (row.acceptTime && row.startTime) {
        return (
          (new Date(row.acceptTime) - new Date(row.startTime)) /
          1000
        ).toFixed(2)
      } else if (row.endTime && row.startTime) {
        return (
          (new Date(row.endTime) - new Date(row.startTime)) /
          1000
        ).toFixed(2)
      }
      return '-'
    },
    duration(row) {
      if (row.acceptTime && row.endTime) {
        return (
          (new Date(row.endTime) - new Date(row.acceptTime)) /
          60 /
          1000
        ).toFixed(2)
      }
      return '-'
    },
    consume(row) {
      const result = []
      if (row.tryCardCount) {
        result.push('试聊卡*' + row.tryCardCount)
      }
      if (row.diamondConsume) {
        result.push('钻石*' + row.diamondConsume / 10)
      }
      if (row.videoCardCount) {
        result.push('视频卡*' + row.videoCardCount)
      }
      if (row.voiceCardCount) {
        result.push('语音卡*' + row.voiceCardCount)
      }
      return result.join(' ')
    },
    onForbid(userId) {
      this.forbidAccounts = userId
      this.dialogVisible = true
    },
    onDelImage(row) {
      this.$confirm('确定删除' + row.channelId + '的图片?').then(() => {
        xhrVideoThumbDelete({
          id: row.channelId
        })
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      })
    },
    reviewAll(row) {
      let userId = null
      if (row.fromGender === 2) {
        userId = row.fromUser
      } else if (row.toGender === 2) {
        userId = row.toUser
      }
      if (!userId) {
        this.$message.warning('没有识别到女用户id')
        return null
      }
      xhrVideoUserVerify({
        userId: userId
      })
        .then(resp => {
          this.$message.success('审阅成功')
          this.doSearch()
        })
        .catch(e => {})
    },
    onVerify(rows) {
      const ids = []
      for (const i in rows) {
        ids.push(rows[i].channelId)
      }
      xhrVideoThumbVerify({
        ids: ids.join(',')
      })
        .then(resp => {
          this.$message.success('审阅成功')
          for (const i in rows) {
            rows[i].checkStatus = 1
          }
          this.$forceUpdate()
        })
        .catch(e => {
          this.$forceUpdate()
        })
    },
    onView(channelId) {
      window.open('/anchor/video-thumb-all?id=' + channelId)
    }
  }
}
</script>
